<template>
  <div class v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
      :append-to-body="true"
    >
      <el-form
        :model="formData"
        class="form-wrap"
        ref="form"
        style="padding-top:0px;"
        :rules="rules"
      >
        <el-form-item label="逾期原因" prop="overdueReason">
          <el-input placeholder="请输入逾期原因" v-model="formData.overdueReason" clearable />
        </el-form-item>
        <el-form-item label="延期天数" prop="addGlDay">
          <el-input
            placeholder="请输入逾期天数"
            type="number"
            v-model="formData.addGlDay"
            @input="inputChange"
            clearable
          />
        </el-form-item>
        <el-form-item label="登记时间" prop="rigiTime">
          <el-date-picker
            v-model="formData.rigiTime"
            type="datetime"
            :value-format="inputFormat('datetime')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="原计划解除隔离时间" prop="moveEndTime">
          <el-date-picker
            v-model="formData.moveEndTime"
            type="datetime"
            :disabled="true"
            :value-format="inputFormat('datetime')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="延期后隔离截止时间" prop="glEndTime">
          <el-date-picker
            v-model="formData.glEndTime"
            type="datetime"
            :disabled="true"
            :value-format="inputFormat('datetime')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input placeholder="备注" type="textarea" v-model="formData.remark" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 * @param {string} footerState   // 底部操作按钮  `
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from "@/utils";
import { AddDutyInfo, EditDutyInfo } from "@/views/yq-personnel/api/overdue.js";
import moment from "moment";
export default {
  name: "overduDialog",
  inject: ["initList", "moveEndTime"],
  props: {
    // form表单数据
    title: {
      type: String,
      default: "查看",
    },
    width: {
      type: String,
      default: "50%",
    },
    footerState: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "add",
    },
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        overdueReason: "",
        addGlDay: 7,
        rigiTime: moment(new Date()).format("YYYY-MM-DD hh:mm:ss"),
      },
      initDays:0,// 列表拿到的初始隔离天数
      // 校验
      rules: {
        addGlDay: [
          { required: true, message: "延期天数不能为空", trigger: "blur" },
        ],
        overdueReason: [
          { required: true, message: "逾期原因不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 日期格式化
    inputFormat(value) {
      if (
        ![
          "date",
          "datetime",
          "daterange",
          "datetimerange",
          "year",
          "month",
        ].includes(value)
      )
        return "";
      switch (value) {
        case "date":
          return "yyyy-MM-dd";
        case "daterange":
          return "yyyy-MM-dd";
        case "month":
          return "MM";
        case "year":
          return "yyyy";
        default:
          return "yyyy-MM-dd HH:mm:ss";
      }
    },
    filterList(name) {
      return getDict(name);
    },
    // 更改弹窗状态
    async changeVisible({ type, row }) {
      console.log(this.moveEndTime());
      this.dialogVisible = !this.dialogVisible;
      this.formData.moveInfoId = row.moveInfoId;
      if (type == "add") {
        this.formData.moveEndTime = row.moveEndTime;
        this.getTime(this.formData.addGlDay);
      } else {
        this.formData = Object.assign(this.formData, row);
        this.initDays = row.addGlDay;
        // this.formData.moveEndTime = this.moveEndTime();
      }
    },
    // 提交新增
    async save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 提交隔离逾期数据
          if (this.type == "edit") {
            EditDutyInfo(this.formData).then((res) => {
              if (res.status == 200) {
                this.$message.success("隔离逾期编辑成功");
                this.$emit("submit");
              }
            });
          } else {
            AddDutyInfo(this.formData).then((res) => {
              if (res.status == 200) {
                this.$message.success("隔离逾期新增成功");
                this.$emit("submit");
                this.$bus.$emit('refreshOverdueList')
                this.$refs.form.resetFields();
              }
            });
          }
          this.dialogVisible = false;
        }
      });
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      // this.popUpdata = this.$options.data().popUpdata;
      // this.getTime();
    },
    inputChange(e) {
      if (this.type == "add") {
        this.getTime(this.formData.addGlDay);
      } else {
        this.getTime(this.formData.addGlDay-this.initDays);
      }
    },
    getTime(days) {
      let time = 1000 * 60 * 60 * 24 * days;
      this.formData.glEndTime = moment(
        new Date(this.formData.moveEndTime).getTime() + time
      ).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
